<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="百领学院"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <div class="nav-box">
            <span class="nav-item active">海报</span>
            <span
                class="nav-item"
                @click="goWordManager"
            >文案</span>
        </div>

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div>
                <div class="adv-box">
                    <img
                        class="adv-img"
                        src="@/assets/images/sourceManager/adv-img.jpg"
                    />
                </div>

                <div class="img-source-list">
                    <div
                        class="source-item"
                        v-for="(item,index) of imgSource"
                        :key="index"
                        @click="goImgSource(item.sourceId)"
                    >
                        <img
                            class="source-img"
                            v-lazy="item.sourceImg"
                        />
                        <div class="source-name">{{item.sourceName}}</div>
                    </div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 共用底部导航栏 -->
        <!-- <common-footer nowPage="1"></common-footer> -->
        <!-- 共用底部导航栏 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonFooter from '@/components/Footer'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'ImgManager',
    components: {
        CommonHeader,
        CommonScroll,
        CommonFooter
    },
    data() {
        return {
            scrollStyle: {
                top: '2.17rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            imgSource: [
                {
                    sourceId: 7,
                    sourceName: '商城推广',
                    sourceImg: require('@/assets/images/sourceManager/source-1.jpg')
                },
                {
                    sourceId: 8,
                    sourceName: '产品推广',
                    sourceImg: require('@/assets/images/sourceManager/source-2.jpg')
                },
                {
                    sourceId: 9,
                    sourceName: '用户晒图',
                    sourceImg: require('@/assets/images/sourceManager/source-3.jpg')
                },
                {
                    sourceId: 10,
                    sourceName: '价格对比',
                    sourceImg: require('@/assets/images/sourceManager/source-4.jpg')
                },
                {
                    sourceId: 11,
                    sourceName: '新手指引',
                    sourceImg: require('@/assets/images/sourceManager/source-5.jpg')
                },
                {
                    sourceId: 12,
                    sourceName: '企业宣传',
                    sourceImg: require('@/assets/images/sourceManager/source-6.jpg')
                }
            ]
        }
    },
    methods: {
        goWordManager() {
            this.$router.push('/wordManager')
        },
        goImgSource(id) {
            this.$router.push({
                path: '/imgSource',
                query: {
                    imgType: id
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.nav-box
    display flex
    justify-content space-between
    height 1.06rem
    padding 0 2.21rem
    background #fff
    .nav-item
        height 1.06rem
        line-height 1.06rem
        font-size 0.37rem
        color 333
        box-sizing border-box
    .active
        color #d7463c
        border-bottom 2px solid #d7463c
.adv-box
    padding 0.16rem 0
    .adv-img
        width 100%
.img-source-list
    display flex
    flex-wrap wrap
    justify-content space-between
    padding 0 0.18rem
    .source-item
        width 4.67rem
        height 4.75rem
        padding 0.18rem 0.18rem 0 0.18rem
        background #fff
        border-radius 6px
        box-sizing border-box
        margin-bottom 0.18rem
        .source-img
            width 100%
        .source-name
            margin-top 0.24rem
            padding-right 0.1rem
            font-size 0.32rem
            color #333
            text-align center
</style>
